<template>
	<div class="longin">
		<div class="login-mask">
			<div class="loginBox">
				<h4>智慧校园查询系统</h4>
        <img src="../assets/img/logo.png" class="loginLogo"/>
				<el-form :model="loginForm" ref="loginForm" :rules="loginRules" label-width="90px" class="loginForm">
					<div class="flexRow">
						<i class="el-icon-user loginNameIcon"></i>
						<el-form-item prop="userName" label="用户名" style="margin-left: -16px;">
							<el-input v-model="loginForm.userName"></el-input>
						</el-form-item>
					</div>
					<div class="flexRow">
						<i class="el-icon-unlock loginPassWordIcon"></i>
						<el-form-item prop="passWord" label="密码" style="margin-left: -28px;">
							<el-input type="password" v-model="loginForm.passWord"></el-input>
						</el-form-item>
					</div>
				</el-form>
        <button @click="submitLoginForm" class="loginButton">登录</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Longin',
		data() {
			return {
				loginForm: {
					userName: "",
					passWord: ""
				},
				loginRules: {
					userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
					passWord: [{ required: true, message: "请输入密码", trigger: "blur" }]
				}
			};
		},
		methods: {
			submitLoginForm() {
				if(this.loginForm.userName !='admin' || this.loginForm.passWord !='123456') {
					alert('用户名或密码错误!');
					this.loginForm.userName = '';
					this.loginForm.passWord = '';
				}
				if(this.loginForm.userName =='admin' && this.loginForm.passWord =='123456') {
					this.$router.push('/Home');
				}
			}
		},
		mounted() {
			if(this.loginForm.userName !='admin') {
				this.loginRules.userName.message = '请输入正确的用户名'
			}
		}
	}
</script>

<style>
  @import url("../assets/css/login.css");
</style>
